/**
 * Created by shantong on 2018/4/29.
 */
import React from 'react';
import { connect } from 'react-redux'
import { Icon, Card, Row, Col, Collapse, Checkbox, Tooltip, Input, Spin } from 'antd';
// import { toggleTodo } from '@/store/reducers/index/action'
import { getTodoList, addTodo, changeTodo } from '@/api/Api.js'
import '../../style/index/index.css';

const Panel = Collapse.Panel;

const customPanelStyle = {
	borderRadius: 4,
	border: 0,
	overflow: 'hidden',
};

const antIcon = <Icon type="loading" style={{ fontSize: 24, top: '39%', left: '96%',}} spin />;

const mapStateToProps = (state, ownProps) => ({
	todoList: state.Home.todoList,
})

// const mapDispatchToProps = (dispatch, ownProps) => ({
// 	// toggleTodo: id => dispatch(toggleTodo(id)),
// })

class Index extends React.Component {
	constructor(props) {
		super(props);
	}
	state = {
		todolistLoading: true,
		addTodoLoading: false,
	}
	toggleTodo = (e) => {
		changeTodo(e.target.value).then(result => {})
	}
	handleAddTodo = (e) => {
		if (e.target.value == '') {
			return false;
		}
		this.setState({addTodoLoading: true});
		addTodo(e.target.value).then(result => {
			this.setState({addTodoLoading: false});
		});
		e.target.value = '';
	}
	componentDidMount() {
		getTodoList().then(result => {
			this.setState({todolistLoading: false});
			// console.log(result, 111)
		})
	}
	render() {
		return <div style={{ minHeight: 3000 }}>
			<Row>
				<Col span={4}>
					<div className="message-box">
						<Card bordered={false} hoverable>
							<div className="y-center">
								<div className="fl" style={{marginRight: 10}}>
									<Icon style={{fontSize: '2em', color: '#13c4ef'}} type="edit" />
								</div>
								<div className="fl">
									<span className="text-muted">文章</span>
									<h2>50</h2>
								</div>
							</div>
						</Card>
					</div>
					<div className="message-box">
						<Card bordered={false} hoverable>
							<div className="y-center">
								<div className="fl" style={{marginRight: 10}}>
									<Icon style={{fontSize: '2em', color: '#40a9ff'}} type="eye" />
								</div>
								<div className="fl">
									<span className="text-muted">访问量</span>
									<h2>3355550</h2>
								</div>
							</div>
						</Card>
					</div>
				</Col>
				<Col span={4}>
					<div className="message-box">
						<Card bordered={false} hoverable>
							<div className="y-center">
								<div className="fl" style={{marginRight: 10}}>
									<Icon style={{fontSize: '2em', color: '#faad14'}} type="star" />
								</div>
								<div className="fl">
									<span className="text-muted">收藏</span>
									<h2>1000</h2>
								</div>
							</div>
						</Card>
					</div>
					<div className="message-box">
						<Card bordered={false} hoverable>
							<div className="y-center">
								<div className="fl" style={{marginRight: 10}}>
									<Icon style={{fontSize: '2em', color: '#44ad11'}} type="user" />
								</div>
								<div className="fl">
									<span className="text-muted">会员</span>
									<h2>500</h2>
								</div>
							</div>
						</Card>
					</div>
				</Col>
				<Col span={16}>
					<div className="message-box">
						<div style={{background: '#08263a'}}>
							<img src="http://xstnet.com/charts.png" alt=""/>
						</div>
					</div>
				</Col>
			</Row>
			<Row>
				<Col span={8}>
					<div className="message-box">
						<Collapse bordered={false} defaultActiveKey={['1']}>
							<Panel header="待办事项" key="1" style={customPanelStyle}>
								<div style={{paddingLeft: 24}}>
									<Spin spinning={this.state.addTodoLoading} indicator={antIcon}>
										<Input onPressEnter={this.handleAddTodo} className='add-todolist-input' placeholder="Add new Todo,  Press Enter to submit" />
									</Spin>
								</div>
								<Card bodyStyle={{padding: '0 24px', maxHeight: 300, overflowY: 'auto'}} bordered={false}>
									<Spin delay={0} spinning={this.state.todolistLoading}>
										{this.props.todoList.map(todo => {
											return <p className='overflow-ellipsis' key={`todo-${todo.id}`}>
												<Checkbox value={todo.id} onChange={this.toggleTodo} className={todo.status != false ? 'todo-completed': ''} checked={todo.status != false ? true: false}>
													<Tooltip placement="topLeft" title={todo.name}>
													{todo.name}
													</Tooltip>
												</Checkbox>
											</p>
										})}
									</Spin>
								</Card>
							</Panel>
						</Collapse>
					</div>
				</Col>
				<Col span={16}>
				</Col>
			</Row>
		</div>;
	}
}

export default connect(
	mapStateToProps,
	// mapDispatchToProps
)(Index)